{{define "title"}}Search - LUCI{{end}}

{{define "head"}}
<script src="/static/common/js/search.js"></script>
{{end}}

{{define "body"}}
<div class="search">
  <div class="form">
    <input id="search-text" type="text" name="q" placeholder="Search for builders..." autofocus>
  </div>
</div>

<div id="search-content">
{{ range .search.CIServices }}
  <h2> {{ .Name }}
    {{ if .Host }} ({{ .Host.HTML }}) {{ end }}
  </h2>
  {{ range .BuilderGroups }}
    <div class="builder-group" data-filterable="{{ .Name | toLower }}">
      <h3 class="builder-group-name"> {{ .Name }} </h3>
      <ul>
        {{ range .Builders }}
          <li class="builder-name" data-filterable="{{ .Label | toLower }}">{{ .HTML }}</li>
        {{ end }}
      </ul>
    </div>
  {{ else }}
    Nothing to see here...
  {{ end }}
{{ end }}
</div>

<script>
(function () {
  'use strict';
  $("#search-text").keyup(function(e) {
    if (e.keyCode == 13 && history.pushState) {
      // Push new history state and change URL on pressing enter in search box.
      var url = ("https://" + window.location.host + window.location.pathname +
                 "?q=" + $(this).val());
      window.history.pushState({path: url}, "", url);
    }
    milo.filter($("#search-content"), $(this).val());
  });
  const q = milo.getUrlParameter("q").replace(/\+/g, " ");
  if (q) {
    $("#search-text").val(q).trigger("keyup");
  }
})();
</script>

{{end}} <!-- Body -->
